<style>
  .layui-form-label{
    text-align: left;
  }
  .liactive{
    background: #dcdcdc;
  }
</style>
<title>用户添加</title>
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>用户</cite></a>
    <a><cite>用户列表</cite></a>
    <a><cite>添加用户</cite></a>
  </div>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-card">
      <div class="layui-card-header">添加用户</div>
      <div class="layui-card-body" style="padding: 15px;">
        <form class="layui-form" action="" lay-filter="component-form-group">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label required">姓名</label>
              <div class="layui-input-inline">
                <input type="text" name="userName" lay-verify="required|userName" autocomplete="off" placeholder="请输入姓名" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">登录名</label>
              <div class="layui-input-inline">
                <input type="text" name="loginName" lay-verify="required|loginName" autocomplete="off" placeholder="请输入登录名" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">部门</label>
              <div class="layui-input-inline">
                <input type="hidden" name="deptId" id="deptId">
                <input type="text" name="deptName" id="deptName" lay-verify="deptName" placeholder="部门" autocomplete="off" class="layui-input">
              </div>
              <button class="layui-btn" id="parent-btn" type="button">请选择</button>
            </div>
          </div>

          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">联系电话</label>
              <div class="layui-input-inline">
                <input type="tel" name="telNumber" lay-verify="required|telNumber" placeholder="联系电话" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
            <label class="layui-form-label">微信</label>
            <div class="layui-input-inline">
              <input type="text" name="weixinId" lay-verify="weixinId" placeholder="微信" autocomplete="off" class="layui-input">
            </div>
           </div>
            <div class="layui-inline">
              <label class="layui-form-label">QQ</label>
              <div class="layui-input-inline">
                <input type="text" name="qqNumber" lay-verify="qqNumber" placeholder="QQ" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">

                <input type="text" name="email" placeholder="邮箱" lay-verify="email" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>

          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
              <textarea name="text" placeholder="备注" class="layui-textarea" name="remark"></textarea>
            </div>
          </div>
          <div class="layui-form-item" style="text-align: right">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="component-form-ts-user">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <a lay-href="/user/user/list" class="layui-btn layui-btn-primary">
                  <i class="layui-icon layui-icon-return"></i>返回
                </a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
layui.use(['admin', 'form', 'laydate','common','tree'], function(){
  var $ = layui.$,
         admin = layui.admin
        ,layer = layui.layer,common=layui.common
        ,form = layui.form;
  /* 自定义验证规则 */
  form.verify({
    loginName: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
  });

  /* 监听提交 */
  form.on('submit(component-form-ts-user)', function(data){
    admin.req({
       url: common.basePath+'system/tsUser/saveTsUser.do' //实际使用请改成服务端真实接口
      ,data: data.field
      ,type:'get'
      ,done: function(res){
           if(res.code == 0){
             layer.msg(res.msg, {
               offset: '15px'
               ,icon: 1
               ,time: 1000
             }, function(){
               location.hash = '/user/user/list';
             });
           }else {
             layer.msg(res.msg, {
               offset: '15px'
               , icon: 2
               , time: 1000
             }, function () {
             });
             return ;
           }
      },success:function (res) {
        console.log(res)
      },error:function (res) {
        console.log(res)
      }});
    return false;
  });

  $('#parent-btn').off('click');
  $('#parent-btn').on('click', function(){
    var deptId ="";
    var deptName="";
    layer.closeAll();
    var html ="<div><ul id='dept-tree'></ul></div>" ;
    layer.open({
              type: 1,
              area:['400px','400px'],
              title:'选择部门',
              scrollbar:true,
              btn:['确定','取消'],
              content: html, //注意，如果str是object，那么需要字符拼接。
              yes:function (index, layero) {
                $('#deptId').val(deptId);
                $('#deptName').val(deptName);
                layer.close(index);
              },
              btn2:function (index) {
                layer.close(index);
              },
              cancel:function () {

              }
            }
    );
    $.post(common.basePath+'system/tsDept/getDeptAndChildDepts.do', {access_token: layui.data('layuiAdmin').access_token}, function(res){
      var data = eval (res);
      layui.tree({
        elem: '#dept-tree' //传入元素选择器
        ,nodes: data
        ,click: function(item){
          deptId = item.id ;
          deptName = item.name ;
        }
      });

    });


    /**
     * 清除样式
     */
    $("body").on("mousedown",".layui-tree a",function(){
      // if(!$(this).siblings('ul').length){
      $(".layui-tree a cite").parent().removeClass('liactive') ; //css('color','#333');
      $(this).find('cite').parent().addClass('liactive'); //.css('color','red');
      // }
    });
  });

});
</script>